<template>
  <div>
    <div class="temp-main">
      <div class="temp-tit">参数模版：</div>
      <div class="temp-list" v-loading="loading">
        <div class="temp-item" v-for="(item,index) in tempData" :key="index" :class="tempObj&&item.id === tempObj.id?'temp-item-active':''" @click="activeItem(index)">
          <div class="txt">
            <el-checkbox aria-readonly v-model="item.isChecked"></el-checkbox>
            <span style="margin-left: 4px;">{{item.recordCode}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppTempModelex } from '@/api/api'
import { getAppointmentParamsTempList } from '@/api/room'
export default {
  data() {
    return {
      // 模板
      loading: false,
      checkroom: [],
      tempData: [],
      tempObj: null
    }
  },
  methods: {
    /**
     * 组件初始化
     * room 选择的医院...机房数据，brush 是否强制刷新
     */
    init(room, brush) {
      this.reset()
      this.getTempList(room, brush)
    },
    // 选中状态去除
    reset() {
      this.tempData.forEach(item => {
        item.isChecked = false
      })
      // this.tempObj = null
    },
    // 模板选择
    async activeItem(index) {
      this.reset()
      console.log('tempObj', this.tempObj)
      if (this.tempObj && this.tempObj.id === this.tempData[index].id) {
        this.tempObj = null
        // this.tempData[index].isChecked = false
        this.$emit('checkedTemplate', null)
      } else {
        this.tempData[index].isChecked = true
        this.loading = true
        const _tempInfo = await this.getTempInfo(this.tempData[index].id)
        this.loading = false
        this.tempObj = { ..._tempInfo, templateSelected: true }
        this.$emit('checkedTemplate', this.tempObj)
      }
    },
    // 获取参数模板数据
    getTempList(room, brush) {
      if (this.checkroom.join(',') === room.join(',') && !brush) {
        return false
      }
      this.checkroom = room ? [...room] : this.checkroom
      const params = {
        HospitalCode: this.checkroom[0],
        DepArea: this.checkroom[1],
        Dep: this.checkroom[2],
        ModalityType: this.checkroom[3],
        CheckRoom: this.checkroom[4],
        IsHasFilters: false
      }
      this.tempObj = null
      this.loading = true
      getAppointmentParamsTempList(params).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tempData = res.content.list
          this.reset()
        }
      })
    },
    // 获取指定模板参数数据
    getTempInfo(id) {
      return new Promise(async resolve => {
        const params = {
          HospitalCode: this.checkroom[0],
          id: id,
          IsHasFilters: true
        }
        await getAppTempModelex(params).then(res => {
          if (res && res.code === 10000) {
            resolve(res.content)
          } else {
            resolve()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.temp-main{
  display: flex;
  flex-direction: column;
  .temp-tit{
    line-height: 40px;
    color: #666;
  }
  .temp-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    border: solid 1px #DCDFE6;
    padding: 4px;
    min-height: calc(100vh - 306px);
    .temp-item{
      width: 100%;
      padding: 10px 10px 10px 2px;
      border: solid 1px #DBDFE9;
      border-radius: 3px;
      margin-bottom: 6px;
      font-size: 12px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      &:hover{
        box-shadow: 0 3px 5px rgba(116, 116, 116, 0.16);
      }
      .txt{
        margin:0 10px;
        /deep/ .el-checkbox{
          position: relative;
          z-index: -1;
        }
      }
      .fc-blue{
        color: #00C0EF;
      }
    }
    .temp-item-active{
      border-color:#00C0EF
    }
  }
}
</style>
